<template>
  <div>
    <el-dialog title="添加/修改商品明细" :visible="tablePopover" width="600" :before-close="handleClose" show-close>
      <div class="list" style="align-items: center;">
        <div class="title label">金额合计：</div>
        <el-switch v-model="tableList.tableAmount"></el-switch>
      </div>
      <div class="title"><span class="label"></span>可选列</div>
      <div class="checkbox">
        <el-checkbox-group v-model="tableList.selectCol">
          <el-row>
            <el-col v-for="col in tableList.columnsAttr" :key="col.name" :span="4">
              <el-checkbox :label="col.name">{{ col.title }}</el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </div>
      <template v-if="tableList.selectCol && tableList.selectCol.length > 0">
        <div class="title">
          <span class="label"></span>已选列
          <span class="hui_tips">长按拖拽可修改排序</span>
        </div>
        <div class="list">
          <div v-for="(item, index) in tableList.selectCol" :key="index" @dragstart="dragstart(index)" class="list-item"
            @dragenter="dragenter($event, index)" @dragover="dragover($event, index)" draggable="true">
            <el-tag>{{ tableLie(item) }}</el-tag>
          </div>
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="e => {
          addTempItem(e, tableList);
        }
          ">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tablePopover: false,
      tableList: {
        columnsAttr: {},
        tableAmount: true,
      },
      // 源对象的下标
      dragIndex: "",
      // 目标对象的下标
      enterIndex: "",
      timeout: null
    };
  },

  created() { },
  methods: {
    tableLie(item) {
      return this.tableList.columnsAttr.find(t => t.name == item).title;
    },
    addTempItem(e, table) {
      if (table.selectCol.length == 0) {
        alert("请至少选择一项");
        return;
      }

      this.$emit("ok", e, table);
      this.handleClose();
    },
    dragstart(index) {
      this.dragIndex = index;
      // console.log(index, 'dragstart');
    },
    dragover(e, index) {
      e.preventDefault();
    },
    dragenter(e, index) {
      e.preventDefault();
      this.enterIndex = index;
      if (this.timeout !== null) {
        clearTimeout(this.timeout);
      }
      // 拖拽事件的防抖
      this.timeout = setTimeout(() => {
        if (this.dragIndex !== index) {
          console.log(this.enterIndex, "this.enterIndex", index);
          const source = this.tableList.selectCol[this.dragIndex];
          this.tableList.selectCol.splice(this.dragIndex, 1);
          this.tableList.selectCol.splice(index, 0, source);
          // 排序变化后目标对象的索引变成源对象的索引
          this.dragIndex = index;
        }
      }, 100);
    },
    isShow(item) {
      this.tableList = { ...this.tableList, ...item };
      this.tablePopover = true;
    },
    handleClose() {
      clearInterval(this.timeout);
      this.timeout = null;
      this.tableList = {};
      this.dragIndex = "";
      this.enterIndex = "";
      this.tablePopover = false;
    }
  },
  mounted() { },
  computed: {
    pageInfo() {
      console.log(this.$vptd.state.page, 'this.$vptd.state.page');

      return this.$vptd.state.page;
    }
  }
};
</script>
<style lang="scss" scoped>
.hui_tips {
  font-size: 16px;
  color: #999999;
}

.list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;

  .list-item {
    margin-left: 20px;
    // 设置 动画效果
    transition: transform 0.3s;
    cursor: move;
    margin-bottom: 6px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}

.checkbox {
  margin-top: 20px;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  color: #000000;

  .label {
    display: inline-block;
    width: 5px;
    height: 16px;
    margin-right: 10px;
    background: #317bf3;
    vertical-align: middle;
  }
}
</style>
